<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        body{
            margin-bottom:500px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <!-- <p v-for="(value,index) in arr">{{(index+1)>=10?(index+1):("0"+(index+1))}}:{{value}}</p> -->
            <p v-for="(value,index) in arr">{{(index+1) | getIndex}}:{{value}}</p>
        </div>
        <hr>
        <p>getMsg:{{getMsg}}</p>
        <p>fMsg:{{num | fMsg}}</p>
        <input type="button" value="+" @click="num=num+1">
        <input type="button" value="-" @click="num=num-1">
        <hr>
        <p>num1:{{num1 | fMsg()}}</p>
        <p>人民币:{{num2 | fNum("￥")}}</p>
        <p>美元:{{num3 | fNum("$")}}</p>
        <hr>
        <p>日期:{{date}}</p>
        <p>日期:{{getDate}}</p>
        <p>日期:{{ date | fDate() }}</p>
        <p>日期:{{ date | fDate("y年m月d日 h时M分s秒") }}</p>
        <p>日期:{{ date | fDate("y/m/d h:M:s") }}</p>
        <p>日期:{{ date | fDate("y年m月d日") }}</p>
        <p>日期:{{ date | fDate("h时M分s秒") }}</p>
        <p>日期:{{ ms | fDate() }}</p>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            arr:["上海","南京","苏州","镇江","甘肃","上海","南京","苏州","镇江","甘肃","上海","南京","苏州","镇江","甘肃"],
            num:10,
            num1:100,
            num2:999,
            num3:77,
            date:new Date(),
            ms:1568619400557
        },
        computed:{
            getMsg(){
                return "￥"+this.num;
            },
            getDate(){
                let y=this.date.getFullYear();
                let m=(this.date.getMonth()+1)>=10?(this.date.getMonth()+1):"0"+(this.date.getMonth()+1);
                let d=(this.date.getDate()+1)>=10?(this.date.getDate()+1):"0"+(this.date.getDate()+1);
                let h=(this.date.getHours()+1)>=10?(this.date.getHours()+1):"0"+(this.date.getHours()+1);
                let M=(this.date.getMinutes()+1)>=10?(this.date.getMinutes()+1):"0"+(this.date.getMinutes()+1);
                let s=(this.date.getSeconds()+1)>=10?(this.date.getSeconds()+1):"0"+(this.date.getSeconds()+1);
                return y+"/"+m+"/"+d+" "+h+":"+M+":"+s;
            }
        },
        filters:{
            getIndex(index){
                return index>=10?index:"0"+index;
            },
            fMsg(num){
                return "$"+num;
            },
            fNum(num,arg){
                return arg+num;
            },
            fDate(date,arg){
                if(!(date instanceof Date) && typeof date == "number"){
                    date=new Date(date);
                }else if(!date instanceof Date){
                    return date;
                }
                let y=date.getFullYear();
                let m=(date.getMonth()+1)>=10?(date.getMonth()+1):"0"+(date.getMonth()+1);
                let d=(date.getDate()+1)>=10?(date.getDate()+1):"0"+(date.getDate()+1);
                let h=(date.getHours()+1)>=10?(date.getHours()+1):"0"+(date.getHours()+1);
                let M=(date.getMinutes()+1)>=10?(date.getMinutes()+1):"0"+(date.getMinutes()+1);
                let s=(date.getSeconds()+1)>=10?(date.getSeconds()+1):"0"+(date.getSeconds()+1);
                if(!arg){
                    return y+"/"+m+"/"+d+" "+h+":"+M+":"+s;
                }
                arg=arg.replace("y",y);
                arg=arg.replace("m",m);
                arg=arg.replace("d",d);
                arg=arg.replace("h",h);
                arg=arg.replace("M",M);
                arg=arg.replace("s",s);
                return arg;
            }

        }
    })
</script>
</html>